<style lang="stylus" rel="stylesheet/stylus" src="./payHabit.styl"></style>
<template>
	<div class="payHabit realTimeDataClass accQuery" :style="{width:pageWidth}" id="payHabit">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/付费分析/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期范围：</span>
					<el-date-picker
						size='small'
						v-model="date"
						type="daterange"
						align="left"
						placeholder="选择日期范围"
						@change='dateChange'
						:picker-options="pickerOptions"></el-date-picker>
				</div>
			</div>
			<div class="choose_plat">
				<el-menu :theme="this.$store.getters.theme[4]"  class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
					<el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
					<el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
					<el-menu-item index="9" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>通用</el-menu-item>
					<el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>高级筛选</el-menu-item>
				</el-menu>
			</div>
		</div>
		<div class="right_content">
			<div class="realTimeServiceTable">
			      	<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
						<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">首付金额分布</span>
					</div>
					<div class="playerAll" id='fisrtPayCount' style="width:100%;height:420px;"></div>
			</div>
			<div class="realTimeServiceTable">
			      	<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
						<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">首付等级分布</span>
					</div>
					<el-tabs type="border-card"  @tab-click="changeLevelType">
					  <el-tab-pane label="人数">
					  	<div class="platContrast" id="fisrtPayLevelByPlayer" style="width:100%;height:420px;"></div>
					  </el-tab-pane>
					  <el-tab-pane label="金额">
					  	<div class="channelContrast" id="fisrtPayLevelByCount" style="width:100%;height:420px;"></div>
					  </el-tab-pane>
					</el-tabs>
			</div>
			<div class="realTimeServiceTable">
			      	<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
						<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">新增到首次付费时长</span>
					</div>
					<div class="payTrend" id="fisrtPayUpTo" style="width:100%;height:420px;"></div>
			</div>
		

		</div>
		<!-- <a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a> -->
		<v-advance ref="advance" :channels='channels' :servers="servers" @get="getData" :post-obj='postObj'></v-advance>
	</div>
</template>
<script src="./payHabit.js"></script>